<!--供应商区分-->
<template>
  <div>
    <cus-search style="padding-bottom: 0">
      <cus-search-item>
        <Form
          :model="form"
          :label-width="80"
          ref="formValidate"
          @keydown.native.enter.prevent="onInit"
        >
          <FormItem label="创建时间" class="mr_48 mb_20">
            <DatePicker
              type="daterange"
              show-week-numbers
              transfer
              ref="formDate"
              :editable="false"
              @on-change="datePickerChange"
              placement="bottom-end"
              placeholder="开始日期 - 结束日期"
            />
          </FormItem>
          <FormItem
            label="供应商"
            :label-width="65"
            class="mr_48 mb_20"
            prop="supplierName"
          >
            <Input
              placeholder="请输入供应商"
              maxlength="20"
              clearable
              v-model="form.supplierName"
            />
          </FormItem>
          <FormItem label="供应种类" class="mr_48 mb_20" prop="materialClass">
            <Select
              v-model="form.materialClass"
              clearable
              placeholder="全部"
              style="width: 200px"
            >
              <Option value="">全部</Option>
              <Option v-for="item in materialClassTree" :value="item.categoryName" :key="item.id">
                {{ item.categoryName }}</Option
              >
            </Select>
          </FormItem>
          <cusButton
            type="primary"
            @onClick="
              pages.page = 1;
              getPurchasingSurchasingListApi();
            "
            >查询</cusButton
          >
          <cusButton class="ml_20" type="primary" @onClick="reset()">重置</cusButton>
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card :showTitle="false" class="mt_20">
      <div class="btnBox">
        <!-- 添加,和导入在机关版按钮应消失，通过权限配置按钮权限 -->
        <cusButton
          class="mr_20"
          type="primary"
          @onClick="onAdd()"
          v-permission="10"
          style="width: 150px"
          >添加</cusButton
        >

        <cusButton
          class="mr_20"
          type="primary"
          @onClick="importExcel()"
          v-permission="20"
          style="width: 150px"
          >导入</cusButton
        >
        <cusButton type="primary" @onClick="exportChange()" style="width: 150px"
          >导出</cusButton
        >
      </div>
      <cus-table
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
        <template slot-scope="{ row }" slot="certificationPictureOperation">
          <div style="height: 40px; width: 80px; margin: auto">
            <viewer ref="viewer" :images="row.certificationPicture">
              <div
                v-for="(item, index) in row.certificationPicture"
                :key="index"
                style="height: 40px; width: 80px; margin: auto"
              >
                <img :src="item.img" alt="" style="width: 100%; height: 100%" />
              </div>
            </viewer>
          </div>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-permission="30"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 8px"
              @onClick="onEdit(row)"
            >
              <Icon type="md-color-filter" size="4" style="margin: 2px 8px 0 0" />
              <span>编辑</span>
            </cus-button>
            <cus-button
              type="text"
              size="small"
              v-permission="40"
              :style="{ color: row.status == 0 ? '#FF4746' : 'green' }"
              style="padding: 0 5px"
              @onClick="onStatus(row)"
            >
              <Icon
                v-if="row.status == 1"
                type="md-checkbox-outline"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <Icon
                v-if="row.status == 0"
                type="ios-close-circle"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>{{ row.status == 1 ? "启用" : "禁用" }}</span>
            </cus-button>
          </div>
        </template>
      </cus-table>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="getPurchasingSurchasingListApi"
        ></cus-page>
      </div>
    </cus-card>
    <!--添加供应商-->
    <addSupplier ref="addSupplier"></addSupplier>
    <!--导入-->
    <cus-uploadModal
      ref="cusUploadNutritionTagModal"
      :temp-src="getApiPurchasingDownloadSupplierExcel"
      :uploadFnc="postApiPurchasingExcelImportSupplyInfoDao"
      titleName="导入供应商"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
      @onOk="onInit"
      @onError="onError"
    ></cus-uploadModal>
    <!--excel导入错误提示-->
    <excelErrorModal ref="excelErrorModal"></excelErrorModal>
  </div>
</template>

<script>
import {
  getPurchasingSurchasingList,
  updatePurchasingSupplierDisable,
  
  getApiPurchasingDownloadSupplierExcel,
  postApiPurchasingExcelImportSupplyInfoDao,
  postApiPurchasingExportSupplierExcel,
} from "@/api/business/manager";
import {productcategory} from "@/api/business/dishesModule";
import addSupplier from "./components/addSupplier.vue";
import excelErrorModal from "./components/excelErrorModal.vue";

const form = {
  id: "",
  startDate: "", // 开始时间
  stopDate: "", // 结束时间
  supplierName: "", // 供应商
  materialClass: "", // 供应种类
};
const columns = [
  {
    title: "序号",
    type: "index",
    width: 70,
    align: "center",
  },
  {
    title: "供应商编码",
    minWidth: 120,
    key: "supplyCode",
    align: "center",
  },
  {
    title: "供应商名称",
    minWidth: 120,
    key: "name",
    align: "center",
  },
  {
    title: "供应种类",
    minWidth: 120,
    key: "materialClass",
    align: "center",
  },
  {
    title: "资质",
    minWidth: 120,
    align: "center",
    slot: "certificationPictureOperation",
  },
  {
    title: "联系人",
    minWidth: 120,
    key: "contact",
    align: "center",
  },
  {
    title: "联系电话",
    minWidth: 120,
    key: "mobile",
    align: "center",
  },
  {
    title: "地址",
    minWidth: 120,
    key: "address",
    align: "center",
  },
  {
    title: "邮箱",
    minWidth: 120,
    key: "email",
    align: "center",
  },
  {
    title: "创建时间",
    minWidth: 120,
    key: "createTime",
    align: "center",
  },
  {
    title: "状态",
    minWidth: 120,
    align: "center",
    render: (h, params) => {
      return h("div", [
        h(
          "span",
          {
            style: {
              background:
                params.row.status == 0
                  ? "#19BE6B"
                  : params.row.status == 1
                  ? "#ED4014"
                  : params.row.status == 2
                  ? "#D197EB"
                  : params.row.status == 3
                  ? "#FDC774"
                  : "",
              color: "#FFFFFF",
              padding: "5px",
            },
          },
          params.row.status == 0
            ? "供应"
            : params.row.status == 1
            ? "停供"
            : params.row.status == 2
            ? "已失效"
            : params.row.status == 3
            ? "已禁用"
            : ""
        ),
      ]);
    },
  },
  {
    title: "操作",
    width: 180,
    fixed: "right",
    slot: "operation",
    align: "center",
  },
];
export default {
  name: "supplierDifferentiation",
  components: { addSupplier, excelErrorModal },
  data() {
    return {
      materialClassTree: [], //供应种类
      form,
      getApiPurchasingDownloadSupplierExcel, // excel下载地址
      postApiPurchasingExcelImportSupplyInfoDao, // 导入
      columns,
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      loading: false,
    };
  },
  mounted() {
    this.onInit();
    this.form = {};
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    reset() {
      this.$refs["formValidate"].resetFields();
      this.$refs.formDate.handleClear(); //清空时间
    },
    onInit() {
      this.getPurchasingSurchasingListApi();
      this.productcategoryApi();
    },
    datePickerChange(date) {
      (this.form.startDate = date[0]), // 开始时间
        (this.form.stopDate = date[1]), // 结束时间
        this.getPurchasingSurchasingListApi();
    },
    onAdd() {
      this.$refs["addSupplier"].show();
      this.$refs["addSupplier"].uploadList = [];
    },
    //下载供应商列表
    exportChange() {
      window.location.href = postApiPurchasingExportSupplierExcel(
        this.form.startDate == undefined ? "" : this.form.startDate,
        this.form.stopDate == undefined ? "" : this.form.stopDate,
        this.form.supplierName == undefined ? "" : this.form.supplierName,
        this.form.materialClass == undefined ? "" : this.form.materialClass
      );
    },
    importExcel() {
      this.$refs["cusUploadNutritionTagModal"].show();
    },
    onEdit(row) {
      let array = [];
      let startTime = null;
      let stopTime = null;
      this.$refs["addSupplier"].show();
      if (
        row.startTime != null &&
        row.startTime != "" &&
        row.stopTime != null &&
        row.stopTime != ""
      ) {
        startTime = `${new Date(row.startTime).Format("yyyy-MM-dd")}`;
        stopTime = `${new Date(row.stopTime).Format("yyyy-MM-dd")}`;
        array.push(startTime, stopTime);
      }
      let uploadList = [];
      row.certificationPicture.forEach((element) => {
        uploadList.push(element.img + "");
      });
      this.$refs["addSupplier"].form = this.$cu.deepClone(row);
      this.$nextTick(() => {
        this.$refs["addSupplier"].form.materialClassValue = this.$cu.deepClone(
          row.materialClassValue.map(Number)
        );
        this.$refs["addSupplier"].dateTime = this.$cu.deepClone(array);
        this.$refs["addSupplier"].uploadList = uploadList;
      });
    },
    // 更改状态
    onStatus(row) {
      this.updatePurchasingSupplierDisableApi(row.id);
    },
    onError(data) {
      // this.$refs['excelErrorModal'].show()
      // this.$refs['excelErrorModal'].data = data.data
    },
    // 供应商区分/table列表数据--------------接口
    getPurchasingSurchasingListApi() {
      return new Promise((resolve) => {
        let params = {
          startDate: this.form.startDate,
          stopDate: this.form.stopDate,
          supplierName: this.form.supplierName,
          materialClass: this.form.materialClass,
          current: this.pages.page,
          size: this.pages.pageSize,
        };
        getPurchasingSurchasingList(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.data.forEach((element) => {
              element.certificationPicture = [];
              element.uploadFiles = [];
              if (
                element.certificationPicture1 != null &&
                element.certificationPicture1 != ""
              ) {
                element.certificationPicture.push({
                  img: element.certificationPicture1,
                });
              }
              if (
                element.certificationPicture2 != null &&
                element.certificationPicture2 != ""
              ) {
                element.certificationPicture.push({
                  img: element.certificationPicture2,
                });
              }
              if (
                element.certificationPicture3 != null &&
                element.certificationPicture3 != ""
              ) {
                element.certificationPicture.push({
                  img: element.certificationPicture3,
                });
              }
            });
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 更新状态--------------------------接口
    updatePurchasingSupplierDisableApi(id) {
      this.loading = true;
      return new Promise((resolve) => {
        updatePurchasingSupplierDisable({ id: id }).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.onInit();
            resolve();
          }
        });
      });
    },
    productcategoryApi() {
      return new Promise((resolve) => {
        productcategory({ size: -1}).then((res) => {
          if (res.retCode == 2000) {
            this.materialClassTree = res.data.records;
            resolve();
          }
        });
      });
    },
  },
  watch: {},
  computed: {},
};
</script>
<style lang="less" scoped>
.btnBox {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
